/* css reset */
* {box-sizing: border-box;}
*:before,*::after{box-sizing: border-box;}
*{margin:0;padding: 0;}
ul,ol{list-style: none;}
a{color: inherit;text-decoration: none;}
img{max-height: 100%;max-width: 100%;}

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}


@media (max-width:500px) {
  .logo {
    height: 90px;
  }

  .globalHeader {
    margin-top: 0 !important;
  }

  .site,.addButton {
    background-color: #F8FAF8 !important;
  }
}


/* style */
body {
height: 100vh;
 background-color: rgb(255, 255, 255);
  background-image: url('./img/bg.png');
  background-repeat: repeat-x;
  background-position: center center;
  /* 虽然body区域是撑开区域,但是加背景色,浏览器会把颜色扩展到整个网页 */
  /* background-color: #eee; */
}
.globalHeader{
  margin: 20px;
}

@media (min-width:500px) {
  .globalHeader{
  margin: 0 0 60px;
}
}

.searchForm {
  display: flex;
  justify-content: space-between;
}

@media (max-width:820px) {
  .searchForm{
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  }
}



@media (min-width:800px){
  .searchForm {
  max-width: 800px;
  /* 当元素有宽度的时候 可以auto*/
  margin-left: auto;
  margin-right: auto;

  }
}

.searchForm > input{
  width: 100%;
  margin-right: 10px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.searchForm > button{
  white-space: nowrap;
  padding: 0 25px;
  border: 1px solid #ddd;
  background-color: #0282b9;
  color: white;
  border-radius: 15px;
  font-size: 16px;
}

.globalMain{
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

 .siteList{
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  /* border: 1px solid red; */
  justify-content: space-between;
}

@media (min-width:800px){
  .siteList{
    justify-content: flex-start;
    margin-left: 0;
    margin-right: -25px;
  }
  .siteList > li {
    margin-right: 40px;
  }
}

.siteList > li {
  margin-bottom: 10px;
}

.site {
  position: relative;
  width: 160px;
  display: flex;
  justify-content: center;   
  flex-direction: column;
  align-items: center;
  background-color: white;
  /* border: 1px solid #ddd; */
  padding: 20px 0;
  border-radius: 4px;
  cursor: pointer;
}

@media (min-width:800px){
  .site{
    width: 120px;
    padding: 10px;
  }
}

.site:hover {
  background-color: #ECECED;
}
.site:hover .link {
  background: white;
}


.site > .close {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 20px;
}

@media(min-width:500px){
  .site > .close {
    display: none;
  }

  .siteList .site:hover > .close{
    display: block;
  }
}

.site > .close > .icon{
  width: 20px;
  height: 20px;
} 

.site > .logo {
  /* border: 1px solid red; */
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px;
  background: #F3F5F4;
  border-radius: 50px;
}

.site > .logo > span {
  font-size: 50px;
}

.site > .link {
  text-align: center;
  padding: 4px 1px;
  width: 90%;
  border-radius: 15px;
  margin-top: 10px;
  font-size: 14px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.siteList .addButton{
  width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 0;
  background: white;
  cursor: pointer;
  /* border: 1px solid #ddd; */
}

@media (min-width:800px){
  .siteList .addButton{
    width: 120px;
    padding: 10px;
  }
}

.siteList .addButton .icon-wrapper{
 width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 64px;
    background: #F3F5F4;
    border-radius: 50px;
}
.siteList .addButton .icon-wrapper .icon {
  width: 40px;
}

.siteList .addButton .text{
  text-align: center;
    padding: 4px 0;
    width: 70%;
    border-radius: 15px;
    margin-top: 10px;
    font-size: 14px;
}


.siteList .addButton .icon {
  width: 64px;
  height: 64px;
}

.addButton:hover {
  background-color: #ECECED;
}

.addButton:hover .text {
  background: white;
}

